@use "@/common/styles/colors"

.source-item
  display: flex
  flex-direction: column
  justify-content: center
  gap: 1rem
  background-color: colors.$dark-gray
  border: 1px solid colors.$gray
  padding: 1rem
  border-radius: 0.5rem
  width: 22rem

  .action-area .action-open
    cursor: pointer

  .action-area .action-delete
    cursor: pointer
    color: colors.$error

  .source-header
    display: flex
    justify-content: space-between
    align-items: center

  .header-official svg
    color: colors.$primary

  .source-info
    display: flex
    gap: 0.5rem
    align-items: center

    span
      color: colors.$subtext
      font-weight: 600

  .edit-area .error
    display: flex
    align-items: center
    justify-content: center
    padding: 0.5rem 1rem
    background-color: colors.$error-opacity
    border: 1px solid colors.$gray
    color: colors.$error
    border-radius: 0.5rem
    font-size: 0.9rem
    margin: 0

  .edit-row
    width: 100%
    display: flex
    align-items: center
    justify-content: space-between

    .input-container
      width: 15rem

  svg
    width: 2rem
    height: 2rem